<template>
    <div class="add-port-column">
<div class="add-port-left">
  <div class="new-get-port">
    <div class="new-get-en">GET</div>
    <div class="new-get-cn">新建请求</div>
  </div>
  <div class="new-post-port">
    <div class="new-post-en">POST</div>
    <div class="new-post-cn">新建请求2</div>
  </div>
  <i class="iconfont font-size-add2" title="添加请求">&#xe638;</i>
</div> 
<div class="add-manage-right">
  <div class="manage" title="管理环境" @click="changeSettingFlag">
    <i class="iconfont font-size-right">&#xe666;</i>
    <div class="manage-envi">管理环境</div>
  </div>
</div>
</div>
<!-- 搜索栏目 -->
<div class="search-column">
<div class="search-left">
  <div class="search-left-wrapped">
    <!-- 选择请求方式 -->
    <el-menu class="el-menu-demo">
      <el-sub-menu index="2">
        <template #title>
          <div class="search-put">PUT</div>
        </template>
        
    <div class="el-items">
      <el-menu
      mode="vertical"
      :default-active="$route.path"
      router 
    >
    <el-menu-item index="/home/get" class="post-item" style="color: #48cfad;">GET</el-menu-item>
          <el-menu-item index="/home/post" class="post-item" style="color: #409eff;">POST</el-menu-item>
      <!-- <el-menu-item index="/home/put" class="put-item" style="color: #ffbd4a;">PUT</el-menu-item> -->
          <el-menu-item index="/home/delete" style="color: #f4658d;">DELETE</el-menu-item>
          </el-menu>
        </div>
      </el-sub-menu>
    </el-menu>
  </div>
</div>
<div class="search-mid">
  <el-input class="mid-input" v-model="inputValue"></el-input>
</div>
<div class="search-right">
  <el-button class="search-send" @click="sending"> 发送</el-button>
  <el-button class="search-save"> 保存</el-button>
</div>
</div>
<!-- 填写栏目 -->
<div class="write-column">
<div class="requset-params-column">
  <div class="params-header">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :default-active="$route.path"
      router
    >
      <el-menu-item index="/home/put/params">Params</el-menu-item>
      <el-menu-item index="/home/put/body">Body</el-menu-item>
      <el-menu-item index="/home/put/cookie">Cookie</el-menu-item>
      <el-menu-item index="/home/put/header">Header</el-menu-item>
      <el-menu-item index="/home/put/auth">Auth</el-menu-item>
      <el-menu-item index="/home/put/setting">设置</el-menu-item>
    </el-menu>
  </div>
  <div class="threeRouter">
    <router-view></router-view>
  </div>
  
</div>
</div>
<!-- 结果栏目 -->
<div class="result-column">
<div class="result-column-wrapped">
  <div class="result-column-content">
    <div class="responseDetails">
      <div class="result-column-left">响应结果</div>
      <p>成功200</p>
    </div>
    <div v-if="isObjectEmpty(responseData)" class="responsedata">
      <json-viewer
        :value="responseData"
        :expand-depth="5"
        boxed
        sort
        :show-array-index="false"
        theme="my-awesome-json-theme"
        expanded="true"
        show-double-quotes="true"
      >
      </json-viewer>
    </div>
    <div class="responsedatas" v-else>
      <div class="img-size">
        <img src="@/assets/images/Campaign launch_Flatline.svg" alt="" />
        <div class="click-button-result">点击“发送”按钮再查看结果</div>
      </div>
    </div>
  </div>
</div>
</div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import axios from "axios";
import { storeToRefs } from "pinia";
import requestSend from "@/stores/modules/requestSend/index";
import Loading from "@/components/Loading/index.vue";
const emit = defineEmits(["changeSetting"]);
// 点击管理环境出现弹出框
const changeSettingFlag = () => {
emit("changeSetting", true);
};
const requestSendStore = requestSend();
// 定义请求链接
const inputValue = ref(``);
// 定义请求返回结果
const responseData = ref({});
// 定义发送按钮请求结果
const sending = async () => {
// 点击发送将表格主体内容进行添加
requestSendStore.tableParamsData.forEach((item) => {
requestSendStore.addParams(item.name, item.value);
});
const res = await axios({
method: requestSendStore.MethodType,
url: requestSendStore.manageConfig + inputValue.value,
params: {
  ...requestSendStore.params,
},
data: {
  ...requestSendStore.data,
},
headers: {
  ...requestSendStore.headers,
  'Authorization':'Bearer ${token}'
},
});
if (res.status == 200) {
responseData.value = res.data;
}
};
// 判断响应结果是否是空数组
const isObjectEmpty = (obj: any) => {
return Object.keys(obj).length != 0;
};
</script>

<style lang="scss" scoped>
.responseDetails {
height: 10%;
}
.result-column-content {
height: 90%;
.responsedata {
height: 85%;
}
}
.threeRouter {
width: 100%;
height: 85%;
}
// values are default one from jv-light template
.jv-my-awesome-json-theme {
background: #fff;
white-space: nowrap;
color: #525252;
font-size: 14px;
font-family: Consolas, Menlo, Courier, monospace;

.jv-ellipsis {
color: #999;
background-color: #eee;
display: inline-block;
line-height: 0.9;
font-size: 0.9em;
padding: 0px 4px 2px 4px;
border-radius: 3px;
vertical-align: 2px;
cursor: pointer;
user-select: none;
}
.jv-button {
color: #49b3ff;
}
:deep(.jv-key) {
color: #a3158d;
}
:deep(.jv-item) {
&.jv-array {
  color: #111111;
}
&.jv-boolean {
  color: #38d166;
}
&.jv-function {
  color: #067bca;
}
&.jv-number {
  color: #fc1e70;
}
&.jv-number-float {
  color: #d9d9d9;
}
&.jv-number-integer {
  color: #00ad17;
}
&.jv-object {
  color: #111111;
}
&.jv-undefined {
  color: #e08331;
}
&.jv-string {
  color: #0451b9;
  word-break: break-word;
  white-space: normal;
}
}
.jv-code {
.jv-toggle {
  &:before {
    padding: 0px 2px;
    border-radius: 2px;
  }
  &:hover {
    &:before {
      background: #eee;
    }
  }
}
}
}
.search-put {
display: flex;
width: 50%;
height: 100%;
font-size: 26px;
align-items: center;
justify-content: center;
padding-bottom: 2px;
color: #ffbd4a;
}
:deep(.el-sub-menu__icon-arrow) {
top: 22%;
font-size: 32px;
}
.el-sub-menu {
width: 100%;
height: 100%;
}
:deep(.el-sub-menu__title) {
// width: 100%;
height: 100%;
display: flex;
align-items: center;
.el-sub-menu__icon-arrow {
margin-top: 0px;
}
}
.el-menu-demo {
width: 100%;
height: 100%;

:deep(.el-items) { 
width: 100%;
background-color: #fff;
// border: 1px solid #fe0000;
border-radius: 3px;
box-shadow: 0 0 2px rgb(149, 151, 152);
position: absolute;
z-index: 99;
.put-item {
  z-index: 10;
  background-color: #fff;
  // border-top: 1px solid  #fe0000;
  // border-right: 0.1px solid rgb(14, 44, 73) ;
  box-shadow: 0.2px 0 0px rgb(149, 151, 152);
  &:hover {
    background-color: #ecf5ff;
  }
}
}
}
.post-item {
display: flex;
flex-direction: row;
z-index: 100;
background-color: #fff;
border-radius: 3px 3px 0 0;
box-shadow: 0.2px 0 1px rgb(149, 151, 152);
}
.post-item:hover {
background-color: #ecf5ff;
}
// 请求栏目css
.add-port-left {
display: flex;
align-items: center;
div {
cursor: pointer;
}
.font-size-add2 {
cursor: pointer;
}
}
// 管理环境内容css
.add-manage-right {
.manage {
display: flex;
align-items: center;
cursor: pointer;
}
}
.search-mid {
:deep(.el-input__inner) {
font-size: 20px;
}
}
.responseDetails {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
p {
width: 75px;
}
}
.responsedata {
padding: 0px 10px 0px 10px;
width: 100%;
margin-top: 10px;
// height: 290px;
background-color: #fff;
overflow-y: scroll;
}
.jv-container.boxed {
border: none;
&:hover {
box-shadow: none;
}
}
/*滚动条样式*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.responsedatas {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 280px;
padding: 0px 20px;
background-color: #fff;
margin-top: 10px;
}
</style>
